<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
		.box {
			width: 500px;
			margin: auto;
			border: 1px solid orange;
			overflow: hidden;
		}
		.d1,
		.d2 {
			width: 200px;
			height: 200px;
			margin: 5px;
			background-color: #7FFFD4;
			float: left;
		}
		.d2 {
			float: right;
		}
		.d3 {
			height: 200px;
			background-color: blueviolet;
		}
/* 		.d4 {
			clear: both;
		} */
		.d5 {
			width: 500px;
			height: 500px;
			background-color: orange;
			margin-top: 20px;
			overflow: hidden;
		}
		.d6 {
			width: 200px;
			height: 200px;
            background-color: blue;
			margin-top: 20px;
		}
	</style>
	<body>
		<div class="box">
			<div class="d1"></div>
			<div class="d2"></div>
			<!-- 浮动后加一个空的标签清除浮动，父盒子高度自适应改变 -->
			<!-- <div class="d4"></div> -->
		</div>
		<div class="d3"></div>
		<div class="d5">
			<div class="d6"></div>
		</div>
		
	</body>
</html>
